<template>
  <div class="singer">
    <!-- <transition
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutRight"
    >
      <router-view></router-view>
    </transition> -->
    <router-view></router-view>
    <van-index-bar :index-list="singerIndex">
      <div v-for="(item, index) in singerInfoList" :key="index">
        <van-index-anchor :index="item.Fidx">{{ item.Fidx }} </van-index-anchor>
        <ul>
          <li
            v-for="singerItem in item.singers"
            :key="singerItem.Fsinger_mid"
            @click="jump(singerItem)"
          >
            <div class="left">
              <!-- <img :src="liItem.singerPic" /> -->
              <img v-lazy="singerItem.singerPic" />
            </div>
            <div class="right">{{ singerItem.Fsinger_name }}</div>
          </li>
        </ul>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
import { getSingerList } from "@axios/service";
export default {
  data() {
    return {
      singerInfoList: [],
    };
  },
  computed: {
    singerIndex() {
      return this.singerInfoList.map((item) => item.Fidx);
    },
  },
  methods: {
    jump(item) {
      const { Fsinger_name, Fsinger_mid } = item;
      // 003CoxJh1zFPpx
      this.$router.push(`/singer/detail/${Fsinger_mid}?name=${Fsinger_name}`);
    },
    async getSingerData() {
      await getSingerList().then((res) => {
        const { code, data } = res;
        if (code) return false;
        let obj = {};

        data?.list.map((item) => {
          const { Findex, Fsinger_mid, Fsinger_name } = item;
          const singerPic = this.handImg(Fsinger_mid);
          if (obj[Findex]) {
            obj[Findex].push({ Findex, Fsinger_mid, Fsinger_name, singerPic });
          } else {
            obj[Findex] = [{ Findex, Fsinger_mid, Fsinger_name, singerPic }];
          }
          return item;
        });
        // 将对象变成数组
        let arr = [];
        for (const key in obj) {
          if (key != 9) {
            arr.push({
              Fidx: key,
              singers: obj[key],
            });
          }
        }
        this.singerInfoList = arr.sort(
          (a, b) => a.Fidx.charCodeAt() - b.Fidx.charCodeAt()
        );
      });
    },
    handImg(mid) {
      if (!mid)
        return "https://img1.baidu.com/it/u=4112794715,1317791462&fm=253&fmt=auto&app=138&f=JPEG?w=690&h=340";
      return `http://y.gtimg.cn/music/photo_new/T001R800x800M000${mid}.jpg`;
    },
  },
  created() {
    this.getSingerData();
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.singer {
  overflow: scroll;
  background: @bgcolor;
  position: absolute;
  .w(375);
  .top(88);
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  // /deep/ .van-index-anchor {
  //   color: red;
  // }
  ::v-deep .van-index-anchor {
    color: rgba(225, 225, 225, 0.8);
    background: @bg3;
    .wh(375,30);
  }
  /deep/.van-index-anchor--sticky {
    .wh(375,30);
    background: @bg3;
  }
  /deep/.singer[data-v-ace08460] .van-index-anchor {
    color: red;
  }
  /deep/.van-index-bar__sidebar {
    .top(360);
    background: #181818;
    .padding(10,0,10,0);
    border-radius: 30px 0 0 30px;
    .van-index-bar__index {
      .padding(3,5,3,5);
      .fs(12);
      color: rgba(225, 225, 225, 0.8);
    }
    .van-index-bar__index--active {
      color: @c;
    }
  }
  ul {
    .margin(0,0,20,0);
    li {
      .wh(375,70 );
      .padding(20,0,0,30);
      box-sizing: border-box;
      display: flex;
      .left {
        .w(50);
        .h(50);
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        .lh(50);
        .margin(0,0,0,20);
        color: rgba(225, 225, 225, 0.8);
        .fs(14);
      }
    }
  }
}
</style>
